$forest-change-color: rgb(255, 102, 153);
$forest-cover-color: rgb(178, 210, 110);
$forest-use-color: rgb(201, 142, 108);
$conservation-color: rgb(49, 130, 189);
$people-color: rgb(112, 125, 146);
$stories-color: rgb(242, 178, 87);
$country-color: rgb(207, 127, 236);


$categories: 'forest-change','forest-cover','forest-use','conservation','people','stories','country';
$colors: $forest-change-color,$forest-cover-color,$forest-use-color,$conservation-color,$people-color,$stories-color,$country-color;


.layers-menu {
  // height: 77px;
  position: relative;
  @include clearfix();

  .inner {
    height: 100%;
    position: relative;
  }

  .categories-list {
    position: relative;
    display: block;
    @media (min-width: $br-mobileMap){
      display: inline-block;
      float: right;
    }
    @media (min-width: 1500px){
      float: left;
      left: 50%;
      @include transform(translate(-50%,0));
      text-rendering: optimizeLegibility;
    }
  }

  .categories-list > li {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    width: 100%;
    cursor: pointer;
    margin-left: 1px;
    color: $dark;
    @media (min-width: $br-mobileMap){
      float: left;
      width: auto;
      padding: 17px 20px 12px;
      border-bottom: 5px solid;
      &:not(.disabled):hover .layers-nav {
        opacity: 1;
        max-height: 1000px;
      }
    }

    // text-rendering: optimizeLegibility;

    .category-name {
      font-weight: 500;
      font-size: 12px;
      text-transform: uppercase;
    }
    > .category-name{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      position: relative;
      padding: 15px 20px;
      border-bottom: 1px solid #e5e5e5;
      &.show{
        &:after{
          @include transform(translate(0,-50%) rotate(0deg));
        }
      }
      .category-num{
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        right: 30px;
        margin: -8px 0 0;
        font-size: 14px;
        text-align: center;
        line-height: 18px;
        @media (min-width: $br-mobileMap){
          display: none;
        }
      }
      &:after{
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        @include transform(translate(0,-50%) rotate(90deg));
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid;
      }
      @media (min-width: $br-mobileMap){
        max-width: 150px;
        padding: 0;
        border-bottom: none;
        &:after{
          display: none;
        }
      }
    }
    &.country-close{
      padding: 0;
      border-bottom: none;
      width: 40px;
      min-height: 1px;

      &.disabled{
        opacity: 0.25;
        @media (max-width: $br-mobileMap - 1){
          display: none;
        }
      }
      &.active{
        opacity: 1;
        @media (max-width: $br-mobileMap - 1){
          display: none;
        }
      }
      .close{
        position: absolute;
        top: 0%;
        left: -1px;
        height: 46px;
        width: 40px;
        border-radius: 0;
        padding: 0;
        background: #A300D9;
        @include transition(all,0,linear);
        border-bottom: 5px solid $country-color;
        &:hover {
          background: $white;
          border-bottom: 5px solid $country-color;
          span{
            box-shadow: 0 0 0 2px #FF4848;
            svg{
              fill: #FF4848;
            }
          }
        }
        span{
          position: absolute;
          top: 50%;
          left: 50%;
          width: 14px;
          height: 14px;
          text-align: center;
          font-family: Arial;
          font-weight: 700;
          color: $white;
          box-shadow: 0 0 0 2px $white;
          border-radius: 50%;
          @include transform(translate(-50%, -50%));
          svg{
            fill: $white;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            @include transform(translate(-50%,-50%));
            @include transition(all,0,linear);
          }
        }
      }
    }




    @for $i from 1 through length($categories) {
      &.#{nth($categories, $i)}{
        .category-name{
          color: nth($colors, $i);
          .category-num{
            color: nth($colors, $i);
          }
          &:after{
            border-top-color: nth($colors, $i);
          }
          @media (min-width: $br-mobileMap){
            color: inherit;
          }
        }
        border-color: nth($colors, $i);
        .layers-nav-header{
          // background: lighten(nth($colors, $i),10%);
          border-color: nth($colors, $i);
          .category-name{
            color: nth($colors, $i);
          }
          .category-icon  {
            background: nth($colors, $i);
            // @include home-icons-sprite(nth($icons, $i));
          }
        }
        .layers-list {
          @media (min-width: $br-mobileMap){
            max-height: 55vh;
            overflow-x: hidden;
            overflow-y: auto;
          }
          .group-name, .grouped-layers-trigger{
            border-left: 3px solid nth($colors, $i);
            @media (min-width: $br-mobileMap){
              border: none;
            }
          }
          li{
            border-left: 3px solid nth($colors, $i);
            @media (min-width: $br-mobileMap){
              border: none;
              &:hover {
                background-color: rgba(nth($colors, $i), 0.1);
              }
            }
          }
        }
      }
    }
    &.country{
      background: #A300D9;
      color: $white;
      @media (max-width: $br-mobileMap - 1){
        background: $white;
        color: #A300D9;
      }
      &.disabled{
        opacity: 0.25;
        .layers-nav{
          display: none;
        }
      }
      &.active{
        opacity: 1;
        @media (max-width: $br-mobileMap - 1){
          .category-name{
            em{
              display: block;
            }
          }
        }

      }
      .category-name{
        color: $white;
        @media (max-width: $br-mobileMap - 1){
          color: rgb(207, 127, 236);
        }
        em{
          position: absolute;
          top: 50%;
          right: 40px;
          background: white;
          border: 1px solid #AAA;
          padding: 0 5px 0 14px;
          font-size: 9px;
          height: 14px;
          line-height: 14px;
          border-radius: 14px;
          color: #AAA;
          display: none;
          text-transform: none;
          @include transform(translate(0,-50%));
          svg{
            position: absolute;
            top: 1px;
            left: 2px;
            right: auto;
            fill: #AAA;
            width: 10px;
            height: 10px;
            @include transition(all,0s);
            @media (min-width: $br-mobileMap){
              left: 0;
              right: 0;
            }
          }
          @media (min-width: $br-mobileMap){
            display: none;
          }
        }
      }
    }
  }

  .layers-nav {
    display: none;
    position: relative;
    z-index: 2000;
    width: 100%;
    max-height: none;
    background: white;
    @include transition(all .2s ease);
    &.show{
      display: inline-block;
    }
    @media (min-width: $br-mobileMap){
      display: inline-block;
      position: absolute;
      width: 200px;
      left: 50%;
      top: 0px;
      margin-left: -100px;
      opacity: 0;
      overflow: hidden;
      max-height: 0;
      @include box-shadow(0px 2px 3px 1px rgba(#000, .15));

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 10px);
        height: 10px;
        @include gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
      }

    }

    .layers-nav-header {
      border-bottom: 4px solid;
      text-align: center;
      display: none;
      @media (min-width: $br-mobileMap){
        display: block;
        position: relative;
        z-index: 2;
        &:after {
          content: "";
          position: absolute;
          top: calc(100% + 4px);
          left: 0;
          width: calc(100% - 10px);
          height: 10px;
          @include gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));
        }

      }

      .category-icon {
        position: relative;
        display: inline-block;
        margin: auto;
        width: 28px;
        height: 28px;
        margin-top: 10px;
        border-radius: 50%;
        svg{
          width: 100%;
          height: 100%;
          fill: $white;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }

      .category-name {
        display: block;
        padding: 5px 10px 15px;
        margin-top: 1px;
      }
    }

  } // layers-nav

}

.layers-list {
  border-bottom: 1px solid #e5e5e5;
  @media (min-width: $br-mobileMap){
    border-bottom: none;
  }
  .layer-group{
    border-top: 1px solid #e5e5e5;
    &:first-child{ border: none; }
    .group-name{
      font-size: 13px;
      padding: 15px 20px 0;
      display: block;
      text-transform: uppercase;
      font-weight: 500;
      @media (min-width: $br-mobileMap){
        padding: 10px;
      }
      em{
        display: block;
        font-size: 11px;
        margin-top: 3px;
        color: #AAA;
        text-transform: none;
        font-weight: 400;
      }
    }
    .grouped-layers-trigger{
      em{
        display: block;
        padding: 0 33px 0 23px;
      }
      .onoffradio{
        margin: 1px 6px 0 0;
        &.checked{
          span{
            background: inherit;
          }
        }
      }
      .onoffswitch{
        margin: 1px 6px 0 0;
      }
    }
    >li{
      border: none;
      padding: 15px 20px;
      @media (min-width: $br-mobileMap){
        padding: 10px;
        padding-left: 15px;
      }
    }
  }
  .grouped-layer{
    padding-right: 0;
    .grouped-layers-trigger{
      display: block;
      font-size: 13px;
      padding: 10px 0px 10px 21px;
      position: relative;
      @media (min-width: $br-mobileMap){
        padding: 10px 0px 6px 15px;
      }
    }
    >li{
      padding: 10px;
      padding-left: 38px;
    }
  }
  li {
    font-size: 13px;
    color: $dark;
    padding: 15px 20px;
    cursor: pointer;
    position: relative;
    @include transition(all .2s ease);
    @media (min-width: $br-mobileMap){
      padding: 10px;
      border-bottom: 1px solid #e5e5e5;
    }
    &.is-disabled {
      pointer-events: none;
      background: #f9f9f9;
      .layer-title {
        padding-left: 23px;
      }
    }

    .layer-title {
      display: inline-flex;
      max-width: 200px;
      @media (min-width: $br-mobileMap){
        width: 115px;
      }
    }

    .onoffradio {
      margin: 0 7px 0 2px;
      &.checked {
        border-color: $forest-change-color;
        span {
          background: $forest-change-color;
        }
      }
    }

    .onoffswitch {
      margin: 1px 6px 0 0;
    }
  }

  .layer-info {
    font-size: 11px;
    padding: 5px 8px 0 23px;
    display: block;
    color: #AAA;
    word-wrap: break-word;
    label {
      position: relative;
      float: none;
      font-weight: normal;
      color: #AAA;
      font-size: 11px;
      margin: 8px 5px 5px 0px;
      padding-left: 13px;
      text-transform: none;
      display: block;
      &.selected {
        color: $dark;
        text-shadow: 0px 0px 0px #999;
        span:before{
          display: block;
        }
      }
      span{
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        top: -1px;
        left: 0;
        border: 1px solid lighten($dark,10%);
        border-radius: 50%;
        &:before {
          content: ' ';
          display: none;
          width: 4px;
          height: 4px;
          background-color: lighten($dark,10%);
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -2px 0 0 -2px;
          border-radius: 50%;
        }
      }
      input {
        display: none;
        cursor: pointer;
        background-image: url('/assets/svg/dragger.svg');
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          background-image: none;
        }
      }
      &.c_f_peru {
        width: 130px;
      }
    }
  }



  .source {
    @extend .info-icon;
    display: block;
    position: absolute;
    top: 14px;
    right: 20px;
    @media (min-width: $br-mobileMap){
      top: 8px;
      right: 10px;
    }
    &.hidden {
      display: none;
    }
  }
}
